<template>
	<div>
		<el-dialog :visible.sync="editVisible" :close-on-click-modal="false" width="450px">
			<div slot="title">
				{{ editTitle }}
			</div>
			<el-form ref="form" :model="form" :rules="formRule" label-width="110px" v-loading="loading" size="mini" class="form"
			 label-position="left" @submit.native.prevent>
				<el-form-item label="名称" prop="name">
					<el-input class="short-input" v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="地址" prop="ip">
					<el-input class="short-input" v-model="form.ip"></el-input>
				</el-form-item>
				<el-form-item label="端口集合" prop="port">
					<el-select v-model="form.port" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<el-button type="success" icon="el-icon-plus" class="add" @click="addportlist()"></el-button>
				</el-form-item>
			</el-form>
			<div class="dialog-footer" slot="footer">
				<el-button type="primary" size="small" class="sureBtn" @click="submitEdit('form')">确定</el-button>
				<el-button @click="editVisible = false" class="cancelBtn" size="small">取消</el-button>
			</div>
		</el-dialog>
		<add-portlist ref="portlist"></add-portlist>
	</div>
</template>

<script>
	import addPortlist from '@c/list/portlist'
	export default {
		components: {
			addPortlist,
		},
		data() {
			return {
				deleteOneUrl: 'deleteTask',
				deleteUrl: 'deleteTask',
				loading: '',
				editVisible: false,
				editTitle: '',
				form: {
					name: '',
					port: '',
					ip: '',
				},
				options: [],
				formRule: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur',
					}, ],
					ip: [{
						required: true,
						message: '请输入地址',
						trigger: 'blur',
					}, ],
					port: [{
						required: true,
						message: '请选择端口',
						trigger: 'change',
					}, ],
				},
				targetList: [],
			}
		},
		created() {
			// this.getPortList()
		},
		methods: {
			showtarget() {
				this.editVisible = true
			},
			addportlist() {
				this.$refs.portlist.showportlist()
				this.$refs.portlist.editTitle = '添加端口列表'
				setTimeout(() => {
					this.$refs.portlist.$refs.form.clearValidate()
					this.$refs.portlist.$refs.form.resetFields()
				}, 50)
			},
			async getPortList() {
				let _this = this
				let param = {
					currentPage: '1',
					pageSize: 100000,
					entity: '',
				}
				let res = await _this.$api.postRequest(param, 'getPortList')
				res.list.forEach((item) => {
					let param = {
						value: item.portId,
						label: item.name,
					}
					// console.log(param.value)
					// this.options = []
					this.options.push(param)
				})
			},
			submitEdit(formName) {
				this.loading = true
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.createTarget()
					} else {
						return false
					}
				})
			},
			async createTarget() {
				let _this = this
				let param = {
					name: _this.form.name,
					portId: _this.form.port,
					hosts: _this.form.ip,
				}
				let res = await _this.$api.postRequest(param, 'createTarget')
				if (res.code == 500) {
					_this.$message({
						message: res.data.message,
						type: 'warning',
					})
					this.loading = false
				} else {
					_this.getTargetList()
					this.loading = false
				}
			},
			async getTargetList() {
				let _this = this
				let param = {
					currentPage: '1',
					pageSize: 100000,
					entity: '',
				}
				let res = await _this.$api.postRequest(param, 'getTargetList', null)
				res.list.forEach((item) => {
					let param = {
						value: item.uuid,
						label: item.name,
					}
					this.targetList.push(param)
				})
				this.$parent.options = []
				this.$parent.options = this.targetList
				this.$parent.loading = false
				this.editVisible = false
				this.$message({
					showClose: true,
					message: '新建扫描目标成功',
					type: 'success',
				})
			},
		},
	}
</script>

<style lang="scss">
	.add {
		padding: 4px 4px;
		font-size: 13px;
		border-radius: 3px;
		margin-left: 2%;
	}
</style>
